<template>
	<div class="playerinformation">
		<el-form label-width="80px" class="searchform">
		  <el-form-item label="角色名称:">
		    <el-input v-model="searchName" placeholder="请输入名称" clearable="" @clear="clear()"></el-input>
		  </el-form-item>
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		<el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
		
		  <el-table
		    :data="tableData"
		    border
			fit
			stripe=""
		    style="width: 100%">
			
		    <el-table-column
			type="index"
			width="100px"
			align="center"
		      label="序号"
		    >
			<template scope="scope"><span>{{scope.$index+(currentPage1 - 1) * 5 + 1}} </span></template>
		    </el-table-column>
			<el-table-column
		      hidden
		      prop="id"
			  align="center"
		      label="编号"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="name"
			  align="center"
		      label="名称"
		    >
		    </el-table-column>
		    
		    <el-table-column
		      fixed="right"
			  align="center"
		      label="操作"
		    >
		      <template slot-scope="scope">
				  <el-button type="text" size="small" @click="giveFuncs(scope.row)">分配功能</el-button>
					<el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
					<el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
				</template>
		    </el-table-column>
		  </el-table>

		  <!-- 分页 -->
		  <div style="text-align:right;">
			  <el-pagination
			background
			layout="prev, pager, next"
			@current-change="current_change"
			:total="total1"
			:current-page.sync="currentPage1">
			</el-pagination>
		  </div>

		  <el-dialog title="添加角色" :visible.sync="dialogFormVisible" width="400px">
			<el-form label-width="80px">
				
				<el-form-item label="角色名称">
    				<el-input v-model="addName" autocomplete="off"
					maxlength="10"
  					show-word-limit
					></el-input>
				</el-form-item>
				
			</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="add(addName)">确 定</el-button>
		</div>
		</el-dialog>

		

		<el-dialog title="修改信息" :visible.sync="dialogVisible2" width="400px">
		
			<el-form ref="editform" :model="editform" label-width="80px">
				<el-form-item label="角色名称">
    				<el-input v-model="editform.name" autocomplete="off"
					maxlength="10"
  					show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item label="id" hidden>
    				<el-input v-model="editform.id" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible2 = false">取 消</el-button>
			<el-button type="primary" @click="submitEdit()">确 定</el-button>
		</div>
		</el-dialog>

		<el-dialog title="分配权限" :visible.sync="dialogVisible1" width="300px">
		
			<!-- <el-form ref="editform" :model="editform" label-width="80px">
				<el-checkbox-group v-model="checkedFuncs">
					<el-checkbox v-for="func in functions" :label="func.name" :key="func.name">{{func.name}}</el-checkbox>
				</el-checkbox-group>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible1 = false">取 消</el-button>
			<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
		</div> -->
		<el-table
    ref="multipleTable"
    :data="functions"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="功能名称"
      width="120">
    </el-table-column>
    <!-- <el-table-column
      prop="url"
      label="url"
      show-overflow-tooltip>
    </el-table-column> -->
  </el-table>
  <div style="width:100%;margin-top:1em;text-align:center">
	  <el-pagination
		small
		layout="prev, pager, next"
		:total="total2"
			:current-page="currentPage2"
			@current-change="current_change2">
		</el-pagination>
  </div>
  <div style="margin: 20px 2em 0 0em;clear:both;">
    <el-button @click="toggleSelection()">取消选择</el-button>
			<el-button type="primary" @click="submit()">确 定</el-button>
  </div>
  
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name:"RoleList",
		data(){
			return{
				//角色列表总页数*10
				total1:100,
				//功能列表总页数*10
				total2:100,
				//角色列表当前页
				currentPage1:1,
				//功能列表当前页
				currentPage2:1,
				//功能列表数据
				functions:[{
					name:"系统管理功能",
					url:"xxx/xxx/xxx"
				},{
					name:"人事管理功能",
					url:"xxx/xxx/xxx"
				},{
					name:"财务管理功能",
					url:"xxx/xxx/xxx"
				},{
					name:"护理管理功能",
					url:"xxx/xxx/xxx"
				}],
				multipleSelection:[],
				options: [{
				value: '选项1',
				label: '监护人员'
				}, {
				value: '选项2',
				label: '护理人员'
				}, {
				value: '选项3',
				label: '管理人员'
				}],
				value:"",
				searchName:"",
				//角色列表数据
				 tableData: [{
				          name: '管理员',
						  id:1
				        }, {
				          name: '人事管理员',
						  id:2
				        },{
				          name: '护理管理员',
						  id:3
				        },{
				          name: '财务管理员',
						  id:4
				        },{
				          name: '后勤管理员',
						  id:5
				        }],
				//弹出添加表单
				dialogFormVisible: false,
				form: {
				name: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
				},
				formLabelWidth: '120px',
				//弹出表单结束
				dialogVisible1: false,
				dialogVisible2: false,
				//修改角色信息的表单
				editform: {
				name: '',
				id: '',
				},
				//要添加的角色名
				addName:""
			}
		},
		methods:{
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
			//查看
			handleClick(row) {
				console.log(row);
				this.dialogVisible1 = true
			},
			//搜索
			search(){
				console.log(this.searchName)
				this.currentPage1 = 1
				this.rolePage(1)
			},
			//清空搜索
			clear(){
				this.currentPage1 = 1
				this.rolePage(1);
			},
			handleClose(done) {
				// this.$confirm('确认关闭？')
				// .then(_ => {
				// 	done();
				// })
				// .catch(_ => {});
				this.dialogVisible1 = false
			},
			//删除
			del(row) {
				this.$confirm('是否删除编号为'+row.id+'的角色？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
					this.$axios.get(this.$global.zuulIp+'/role/roleDel?id='+row.id)
						.then(response => {
							if(response.data){
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.rolePage(1)
							}else{
								this.$message.error('删除失败！');
							}
						})
						.catch(function (error) {
							console.log(error);
						});
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
			},
			//修改
			edit(row){
				this.dialogVisible2 = true
				this.editform.name = row.name
				this.editform.id = row.id
			},
			//提交修改
			submitEdit(){
				console.log(this.editform.name,this.editform.id)
				//先判断是否已存在
				this.$axios.get(this.$global.zuulIp+'/role/roleByName',{params:{
					name:this.editform.name
				}})
				.then(response => {
					console.log(response.data)
					if(response.data.name != null){
						this.$message.error('角色已存在！');
					}else{
						//做修改角色操作
						this.$axios.post(this.$global.zuulIp+'/role/roleEdit',{
							name:this.editform.name,
							id:this.editform.id
						})
						.then(response => {
							if(response.data){
								this.$message({
									type: 'success',
									message: '修改成功!'
								});
								this.dialogVisible2 = false
								this.rolePage(1)
							}else{
								this.$message.error('修改失败！');
							}
						})
						.catch(function (error) {
							console.log(error);
						});
					}
				})
				.catch(function (error) {
					console.log(error);
				});
			},
			//添加
			add(addName){
				console.log(addName)
				//先判断是否已存在
				this.$axios.get(this.$global.zuulIp+'/role/roleByName',{params:{
					name:addName
				}})
				.then(response => {
					console.log(response.data)
					if(response.data.name != null){
						this.$message.error('角色已存在！');
					}else{
						//做添加角色操作
						this.$axios.post(this.$global.zuulIp+'/role/roleAdd',{
							name:addName
						})
						.then(response => {
							if(response.data){
								this.$message({
									type: 'success',
									message: '添加成功!'
								});
								this.dialogFormVisible = false
								this.rolePage(1)
							}else{
								this.$message.error('添加失败！');
							}
						})
						.catch(function (error) {
							console.log(error);
						});
					}
				})
				.catch(function (error) {
					console.log(error);
				});
			},
			giveFuncs(row){
				this.dialogVisible1 = true
			},
			submit(){
				console.log(this.multipleSelection)
			},
			//查询角色列表
			rolePage(pageNum){
				this.$axios.get(this.$global.zuulIp+'/role/rolePage',{params:{
					pageNum:pageNum,
					pageSize:5,
					name:this.searchName
				}})
				.then(response => {
					this.tableData = response.data.list
					this.total1 = response.data.pages * 10
				})
				.catch(function (error) {
					console.log(error);
				});
			},
			//角色列表分页
			current_change(currentPage1){
				console.log(currentPage1)
				this.rolePage(currentPage1)
			},
			//功能列表分页
			current_change2(currentPage2){
				console.log(currentPage2)
			}
		},
		mounted(){
			this.rolePage(1)
		}
	}
</script>

<style scoped="scoped">
	.searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
</style>
